import { h, Component } from 'preact';
import s from './style';
import Modal from '~/components/Modal';
import Message from '~/components/Message';
import Selectbox from '~/components/Selectbox';
import classNames from 'classnames';
import {saveAdressAction} from '~/actions/entrance';
import store from '~/utils/common/store';
import { connect } from 'preact-redux';
class ReveiceAdress extends Component {
	constructor(props) {
		super(props);
		this.state = {
			open: true
		};
		// console.log(store);
	}
	onPhoneLengthLimit = (e) => {
		const phone = e.target.value;
		this.refDrawPhone.value = phone.substr(0,11);
	}
	submitData = () => {
		const { detailId , dispatch } = this.props;
		if (this.refName.value === '' || this.refName.value === null){
			Message.show({title:'请填写收货人姓名'});
		} else if (this.refDrawPhone.value === '' || this.refDrawPhone.value === null){
			Message.show({title:'请填写收货人手机号'});
		} else if (!(/^[0-9]*$/.test(this.refDrawPhone.value))){
			Message.show({title:'手机号不存在'});
		} else if (this.refAdress.value === '' || this.refAdress.value === null){
			Message.show({title:'请填写详细地址'});
		} else {
			const data = {
				detailId,
				name: this.refName.value,
				phone: this.refDrawPhone.value,
				address: this.refAdress.value,
				provinceId: this.refPlace.state.province,
				cityId: this.refPlace.state.city,
				countyId: this.refPlace.state.county
			};
			dispatch(saveAdressAction(data)).then((res)=> {
				console.log(res);
				this.adressonClose();
				Message.show({title:'确认收货地址成功，我们将在15个工作内安排发货，如有问题请联系客服热线4000-916-916'});
			});
		}

	}
	adressonClose = () => {
		this.setState({
			open: false
		});
		setTimeout(this.onCloseAddress,270);
	}
	onCloseAddress = () => {
		const { dispatch } = this.props;
		dispatch({
			type:'closeAddress'
		});
	}
	render() {
		const { onPhoneLengthLimit } = this;
		const { isOpen } = this.props;
		const { open, errorMessage } = this.state;
		const style = {
			content: {
				width: '91%',
				overflow:'visible',
				border: '0.28125rem solid #fcbe69',
				'border-bottom': '0.28125rem solid #d29e57',
				right: 'auto',
				background: '#fff9f0'
			}
		};

		const modalProps = {
			isOpen,
			style,
			className:open ? s.wrap : s.close,
			contentLabel:''
		};
		return (
			<Modal { ...modalProps }>
				<div className={s.header}>
					<div className={s.close} onClick={this.adressonClose}><i className="icon-close-a" /></div>
					<div className={s.title}>收货信息</div>
				</div>
				<div className={s.body}>
					<div className={s.b_title}>
						中奖15天内未填写视为自动放弃
					</div>
					<div className={s.rev_body}>
						<div className={s.rev_form}>
							<input type="text" className={s.rev_txt} placeholder="填写收货人姓名" ref={(ref) => { this.refName = ref; }}/>
						</div>
						<div className={s.rev_form}>
							<input type="phone" onKeyUp={onPhoneLengthLimit} className={s.rev_txt} placeholder="填写收货人手机号" pattern="/^1[34578]\d{9}$/" ref={(ref) => { this.refDrawPhone = ref; }}/>
						</div>

						<div className={s.rev_form}>
							<Selectbox ref={(ref) => { this.refPlace = ref; }}/>
						</div>
						<div className={s.rev_form}>
							<textarea name="" id="" cols="30" rows="5" className={s.rev_txt2} placeholder="填写详细收货地址" ref={(ref) => { this.refAdress = ref; }}></textarea>
						</div>
						<div className={s.buttonBox}>
							<button className={s.button} onClick={this.submitData}>确定收货信息</button>
						</div>
					</div>
				</div>
			</Modal>
		);
	}
}

export default connect(state =>(state))(ReveiceAdress);
